<template>
    <div class="login">
        <!--<input type="text" v-model="text">
                        <audio :src="'http://192.168.18.53:3001/hxyy-gateway/api/word/getAudio/'+text" type="audio/mpeg" preload="auto" controls></audio>-->
        <div class="top-bg">
            <img src="../assets/img/t-bg.png" alt="">
        </div>
        <div class="i-body" :class="{write:isWrite}">
            <div class="account">
                <div class="icon">
                    <img src="../assets/img/p-icon.png" alt="">
                </div>
                <div class="a-input">
                    <mt-field placeholder="请输入账号" v-model="form.phone" @focus.native.capture="isWrite=true" @blur.native.capture="isWrite=false"></mt-field>
                </div>
            </div>
            <div class="password">
                <div class="icon">
                    <img src="../assets/img/lock-icon.png" alt="">
                </div>
                <div class="p-input">
                    <mt-field placeholder="请输入密码" v-model="form.password" type="password" @focus.native.capture="isWrite=true" @blur.native.capture="isWrite=false"></mt-field>
                </div>
            </div>
            <mt-checklist class="rem" v-model="remember" :options="['记住密码']">
            </mt-checklist>
            <div class="login-btn" @click="login">登 录</div>
        </div>
        <div class="b-bg">
            <img src="../assets/img/bg.png" alt="">
        </div>
    </div>
</template>
<script>
import io from 'api/io'
import storage from 'storage'
import md5 from 'js-md5'
export default {
    name: 'login',
    data() {
        return {
            remember: [],
            form: {
                phone: '',
                password: '',
                userType: 0
            },
            rem: storage.getRemember(),
            isWrite: false
        }
    },
    mounted() {
        if (this.rem&&this.rem.phone) {
            this.form.phone = this.rem.phone
            this.form.password = "******"
            this.remember = this.rem.remember
            this.rempassword = this.rem.password
        }else{
            this.form.phone=storage.getAccount()
        }
    },
    created() {
    },
    methods: {
        //判断输入是否符合规则
        judgeInput(){
            if (!this.form.phone) {
                Toast('请输入账号')
                return false
            }
            if (!this.form.password) {
                Toast('请输入密码')
                return false
            }
            return true
        },
        //处理记住密码时，密码的输入
        dealPassword(){
            let password = ''
            if (this.rem && this.rem.remember && this.form.password === "******") {
                password = this.rempassword
            } else {
                password = md5(this.form.password + 'yjfggt')
            }
            return password
        },
        async login() {
            if (!this.judgeInput()) {
                return
            }
            let password = this.dealPassword()
             try {
                let { data } = await io.post(io.login, { ...this.form, password: password })
                if (data.success) {
                    storage.setAccount(this.form.phone)
                    //处理是否记住密码
                    if (this.remember.length) {
                        storage.setRemember({ ...this.form, remember: this.remember, password: password })
                    } else {
                        storage.removeRemember()
                    }
                    storage.setAccessToken(data.data.accessToken)
                    storage.setCurrentUserInfo(JSON.stringify(data.data))
                    if (data.data.learn === 0) {
                        this.$router.push('/list')
                    } else {
                        this.$router.push('/')
                    }
                } 
            } catch (err) {
                console.error(err)
            }
        }
    }

}
</script>
<style lang="stylus" scoped>
.login
    position relative
    height auto
    min-height 100%
    background white
    .top-bg
        z-index 2
    .top-bg,.b-bg
        position absolute
        top 0
        left 0
        width 100%
        img 
            width 100%
    .b-bg
        top auto
        bottom 0
        img 
            position absolute
            bottom 0
    .i-body
        position absolute
        top 44vh
        @media screen and (min-width: 600px) {
            top 53vh
        }
        @media screen and (min-width: 500px)and (max-width: 600px) {
            top 49vh
        }
        display flex
        flex-direction column
        width 70%
        margin-left 15%
        z-index 1
        &.write
            background white
            z-index 11
        .account,.password
            display flex
            width 86%
            margin-left 7%
            border-bottom 1px solid #e5e5e5
            padding 0 10px
            margin-top 6px
            box-sizing border-box
            .icon
                display flex
                align-items center
            .a-input
                flex 1
            img 
                width 20px
                height auto
    .rem
        padding-left 5%
    .login-btn
        width 90%
        margin-left 5%
        height 42px
        background-image linear-gradient(135deg, #8ddc5d 0%, #59cf77 100%);
        box-shadow 3px 5px 18px 0px rgba(65, 208, 51, 0.5);
        border-radius 42px;
        display flex
        justify-content center
        align-items center
        color white
        font-size 18px
        margin-top 20px
</style>
<style lang="stylus">
.login .rem
    .mint-checkbox-core
        border-radius 4px
        width 12px
        height 12px
        border-color #3fd251
    .mint-checkbox-input:checked + .mint-checkbox-core
        background-color #ffffff
    .mint-checkbox-input:checked + .mint-checkbox-core::after
        border-color #3fd251
    .mint-checkbox-core::after
        top 0
        left 4px
    .mint-checkbox-label
        font-size 12px
        color #999
    .mint-cell{
        min-height 12px
    }
</style>


